<template>
  <div class="discover-channel">
    <van-pull-refresh
      v-model="isLoading"
      pulling-text="下拉可刷新"
      loosing-text="松开以刷新"
      loading-text="正在刷新..."
      @refresh="onRefresh"
    >
      <transition name="el-zoom-in-top">
        <p
          class="tips"
          v-show="visible"
        >为您搜寻到{{count}}篇可能感兴趣的内容</p>
      </transition>

      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="news-list"
      >
        <van-cell
          v-for="item in list"
          :key="item.id"
          :class="formats[item.layout]"
          @click="pushNativelink(item.weblink)"
          clickable
        >
          <template slot="title">
            <div class="van-cell-text">{{item.title}}</div>
            <div
              class="news-exts"
              v-if="item.layout<=1"
            >
              <van-tag
                :type="item.tag.type"
                plain
                v-if="item.tag"
              >{{item.tag.text}}</van-tag>
              <span>{{item.author}}</span>
              <span v-if="item.stats && item.stats.views">{{item.stats.views}}</span>
              <span>{{item.publishTime}}</span>
            </div>
          </template>

          <div
            class="flexbox"
            v-if="item.layout==3 && item.thumbs.length>=3"
          >
            <div
              class="flexbox-item news-content"
              v-for="thumb in item.thumbs"
              :key="thumb.id"
            >
              <van-image
                :src="thumb.url"
                fit="cover"
              />
            </div>
          </div>
          <div
            class="news-content"
            v-else-if="item.layout>0 && (item.thumbs.length>0 || item.cover)"
          >
            <van-image
              :src="item.cover?item.cover:item.thumbs[0].url"
              fit="cover"
            />
            <span
              v-if="item.video && item.layout==2"
              class="video-center-play"
            ></span>
            <span
              v-if="item.video"
              class="video-duration"
            >{{item.video.duration}}</span>
          </div>

          <div
            class="news-exts"
            v-if="item.layout>1"
          >
            <van-tag
              :type="item.tag.type"
              plain
              v-if="item.tag"
            >{{item.tag.text}}</van-tag>
            <span>{{item.author}}</span>
            <span v-if="item.stats && item.stats.views">{{item.stats.views}}评论</span>
            <span>{{item.publishTime}}</span>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Popup,
  Button,
  Panel,
  PullRefresh,
  Image,
  Lazyload,
  List
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Lazyload.name]: Lazyload,
    [List.name]: List
  },

  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      count: 0,
      isLoading: false,
      show: false,
      visible: false,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      },
      formats: [
        'discover-text',
        'discover-thumb',
        'discover-banner',
        'discover-gralley'
      ]
    }
  },

  methods: {
    onLoad () {
      let page = this.meta.currentPage + 1
      this.axios
        .get('/discover/article', {
          params: { page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClick (id) {
      // this.$router.push({name: 'discover/article/:id', params: {id: id}})
      // pushToArticlePage(id)
    },
    onRefresh () {
      let time = this.list.length > 0 ? this.list.slice(0, 1)[0].created_at : 0
      this.axios
        .get('/discover/article/recent', {
          params: { time: time },
          headers: { FastMode: true }
        })
        .then(response => {
          this.isLoading = false
          let data = response.data.items
          let count = data.length
          let listCount = this.list.length
          if (count > 0) {
            this.visible = true
            this.list = this.arrayUnique(data.concat(this.list))
            this.count = this.list.length - listCount
            setTimeout(() => {
              this.visible = false
            }, 1500)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    arrayUnique (arr) {
      let result = []
      let hash = {}
      for (let i = 0, elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem.id]) {
          result.push(elem)
          hash[elem.id] = true
        }
      }
      return result
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.tips {
  background: #d8e8f8;
  color: #047bb3;
  font-size: 12px;
  margin: 0;
  padding: 10px 15px;
  text-align: center;
  font-weight: normal;
}

.news-content {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 1;
  background: #000000;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 62%;
  height: 0;
}
.news-content img {
  margin: auto;
}
.news-content div {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.news-content span {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
}
.news-content span.video-center-play {
  left: 50%;
  top: 50%;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}
.news-list {
  padding-top: 0;
}

.news-list /deep/ .van-cell-text {
  line-height: 24px;
  font-size: 14px;
  color: #333;
}

.news-list .flexbox {
  font-size: 0;
}

.discover-text /deep/ .van-cell__title,
.discover-thumb /deep/ .van-cell__title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.discover-thumb /deep/ .van-cell__title {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
.discover-thumb /deep/ .van-cell-text {
  padding-right: 10px;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

.discover-gralley,
.discover-banner {
  flex-direction: column;
}
.discover-gralley .flexbox {
  justify-content: space-between;
}
.discover-gralley .news-content {
  margin-right: 5px;
  height: 0;
  padding-bottom: 28%;
}
.discover-gralley .news-content:last-child {
  margin-right: 0;
}

.discover-gralley /deep/ .van-cell__title,
.discover-banner /deep/ .van-cell__title {
  padding-bottom: 5px;
}

.news-exts {
  width: 100%;
  text-align: left;
  padding: 5px 0 0;
  overflow: hidden;
  font-weight: 300;
}
.news-exts span {
  font-size: 10px;
  display: inline-block;
}
.news-exts span:not(.van-tag) {
  color: #aaa;
}
.news-exts span.van-tag {
  padding: 0.02rem 0.04rem;
}
.news-exts span.hsbar {
  width: 0.1rem;
  text-align: center;
}

.news-exts /deep/ .van-button--mini {
  width: 0.3rem;
  position: absolute;
  right: 0.1rem;
  border-radius: 0.2rem;
}
.van-list {
  min-height: 100vh;
}
</style>
